<!--
 * @Description:  studyReport -- 学习报告
 * @Author: your name
 * @Date: 2024-02-19
 * @LastEditTime: 2024-02-19
 * @LastEditors: Please set LastEditors
-->

<template>
  <div class="wrapper_tcon">
    <!-- 笔记列表 -->
    <div class="tab_firstclass">
      <div class="left_tab">
        <p :class="{ active: isanswer == 0 }" @click="fisrstclass_choose(0)">
          笔记列表
        </p>
        <p :class="{ active: isanswer == 1 }" @click="fisrstclass_choose(1)">
          答疑列表
        </p>
      </div>
    </div>

    <!-- 我的 -->
    <div class="tab_twoclass">
      <div class="Belonger">
        <p :class="{ active: isall == 1 }" @click="twoclass_choose(1)">我的</p>
        <p :class="{ active: isall == 2 }" @click="twoclass_choose(2)">全网</p>
      </div>
      <div class="Structure">
        <p :class="{ active: islist == 1 }" @click="distribution_choose(1)">
          <i class="fa fa-cubes" aria-hidden="true"></i>
          <span>按题库分类</span>
        </p>
        <p :class="{ active: islist == 3 }" @click="distribution_choose(3)">
          <i class="fa fa-cubes" aria-hidden="true"></i>
          <span>按视频分类</span>
        </p>
        <p :class="{ active: islist == 2 }" @click="distribution_choose(2)">
          <i class="fa fa-list" aria-hidden="true"></i>
          <span>按列表分类</span>
        </p>
      </div>
    </div>

    <div class="contentbox" v-if="islist == 1 || islist == 3">
      <div class="tabstage" v-if="islist == 3">
        <p
          :class="{ active: stage_index == index }"
          v-for="(item, index) in 3"
          :key="'stagelist' + index"
          @click="change_stage(index, item.dir_id)"
        >
          前导入门班
        </p>
      </div>
      <div class="Structure_box">
        <div class="collapse">
          <div
            class="collapseItem"
            ref="q1"
            v-for="child in cateByList"
            :key="child.id"
          >
            <div class="tit">
              <p>{{ child.name }}</p>
            </div>
            <div
              class="innerCollapse"
              v-for="(items, index) in chapterList"
              :key="items.id"
              :id="'quantitative' + (index + 1)"
            >
              <div class="item">
                <div class="innerTit" @click="LevelList(items)">
                  <p class="name">
                    <span class="el-icon-folder-opened"></span>
                    {{ items.name }}
                  </p>
                </div>
                <div class="childList" v-if="items.childShow">
                  <div class="listItem" v-for="e in bigList" :key="e.id">
                    <div class="itemCon">
                      <div class="left">
                        <p>
                          {{ e.name }}
                        </p>
                      </div>
                      <div class="right">
                        <span>{{ e.count }}个</span>
                        <router-link
                          :to="{
                            path: 'answerQuestionlist'
                          }"
                        >
                          查看详情
                        </router-link>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="anchorLink">
          <a
            :class="{ active: dotact == i }"
            href="javascript:void(0);"
            v-for="(e, i) in chapterList"
            :key="e.id"
            @click="linkTo(i)"
          >
            {{ e.name }}
          </a>
        </div>
      </div>
    </div>

    <div class="contentbox" v-else>
      <ul class="list_box">
        <li v-for="(item, index) in 3" :key="index">
          <router-link
            :to="{
              path: 'answerQuestion_detail',
              query: { qid: item.qid, tid: item.tid, item_id: cateid }
            }"
            v-if="isanswer !== 1"
          >
            <div class="left_box">
              <img
                src="https://www.rongyuejiaoyu.com/static/index/images/head4.jpg"
                alt=""
              />
            </div>
            <div class="text_box">
              <div class="text_title">
                <p class="nickname_listbi">152****0819</p>
                <span class="time_listbi">2024-02-23 09:59:10</span>
                <div class="from_listbi" style="display: inline-block">
                  来源于
                  <!-- <div style="display: inline-block" v-html="soure"></div> -->
                  <div style="display: inline-block">
                    CFA>M5-1 Time-Series Analysis
                  </div>
                </div>
              </div>
              <p class="text_content">16年2季度是14，为什么3季度就是19了</p>
            </div>
          </router-link>
        </li>
      </ul>
      <div class="block pagebox">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10, 20, 40, 50]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pagetotal"
        >
        </el-pagination>
      </div>
      <!-- <div style="text-align: center; margin-top: 30px" v-else>暂未数据</div> -->
    </div>
  </div>
</template>

<script>
import {
  getCateByZhike,
  getSubjectByZhike,
  getKnowledge
} from '@/api/answerQuestion'
export default {
  name: 'answerQuestion',
  data() {
    return {
      isanswer: 0, //  1 答疑  0 笔记
      isall: 1, //  1 我的  2 全网
      islist: 1, // 1 题库章节  2 列表 3 视频章节
      dotact: 0, // 右侧导航选中
      cateid: 0,
      stage_index: 0,
      currentPage: 1, //当前页
      pagetotal: 0, //总页数
      pageSize: 20,
      chapterList: [], // 获取科目
      stagelist: [],
      bigList: [], // 知识点
      cateByList: [] // 获取项目
    }
  },
  created() {
    this.getAnswerQuestList()
    this.getSubject()
    this.KnowledgeData()
  },
  methods: {
    LevelList(items) {
      items.childShow = !items.childShow
      this.KnowledgeData()
    },
    KnowledgeData() {
      getKnowledge({ subject_id: 1, cate_id: 1, combo_id: 1 }).then(
        ({ data: data }) => {
          this.bigList = data.data
        }
      )
    },
    async getSubject() {
      let _that = this
      const { data: data } = await getSubjectByZhike({
        cate_id: 1,
        combo_id: 1
      })
      data.data.map((ele, index) => {
        if (ele.childShow) {
          ele.childShow = ele.childShow
        } else {
          ele.childShow = false
        }
        _that.chapterList.push(ele)
        return ele
      })
      // console.log(_that.chapterList)
    },
    async getAnswerQuestList() {
      const { data: data } = await getCateByZhike({ combo_id: 1 })
      this.cateByList = data.data
    },
    linkTo(i) {
      $('html,body').animate(
        { scrollTop: $(`#quantitative${i + 1}`).offset().top - 80 + 'px' },
        500
      )
      this.dotact = i
    },
    fisrstclass_choose(e) {
      this.isanswer = e
      this.isall = 1
      this.islist = 1
    },
    twoclass_choose(e) {
      this.isall = e
    },
    distribution_choose(e) {
      this.islist = e
    },
    change_stage(index, id) {
      this.stage_index = index
    },
    //选择每页数量
    handleSizeChange(val) {
      this.pageSize = val
      this.isanswer ? this.getQAList() : this.get_NoteList()
      console.log(`每页 ${val} 条`)
    },
    // 选择页数（前后页跳转）
    handleCurrentChange(val) {
      this.currentPage = val
      this.isanswer ? this.getQAList() : this.get_NoteList()
      console.log(`当前页: ${val}`)
    }
  }
}
</script>

<style scoped lang="scss">
@import '@/assets/styles/index.scss';
@import '@/assets/styles/answerQuestion.scss';
</style>
